<script>
  import { entityToObject } from '$lib/serialize';
  import ItemList from '../ItemList.svelte';
  import Skill from './Skill.svelte';
  import { FreeSkills, enumAvailableSkills, enumSkills } from './skill';
  import {} from './skills';

  let { tick, world, char } = $props();

  let skills = $derived(char ? (tick, enumAvailableSkills(world, char)) : []);

  let freePoints = $derived((tick, FreeSkills.amount[char]));
</script>

<div>
  <h3>Skills</h3>
  <ItemList>
    {#each skills as [_, skill]}
      <Skill {skill} character={char} bind:tick />
    {/each}
  </ItemList>
  {freePoints} left
</div>
